<template>
  <div class="address-container">
    <el-card class="address-card">
      <template slot="header">
        <div class="card-header">
          <span>地址列表</span>
          <div class="search-container">
            <el-input
              v-model="mobile"
              placeholder="请输入手机号搜索"
              prefix-icon="el-icon-search"
              :style="{ width: '200px' }"
            ></el-input>
            <el-button type="primary" @click="fetchAddressList" style="margin-left: 10px;">
              搜索
            </el-button>
          </div>
        </div>
      </template>
      
      <el-table
        v-loading="loading"
        :data="addressList"
        style="width: 100%"
        border
      >
        <el-table-column prop="consignee" label="收货人" width="120"></el-table-column>
        <el-table-column prop="mobile" label="手机号" width="150"></el-table-column>
        <el-table-column label="地址" width="auto">
          <template slot-scope="scope">
            {{ scope.row.province }} {{ scope.row.city }} {{ scope.row.district }} {{ scope.row.detail }}
          </template>
        </el-table-column>
        <el-table-column prop="user.nickname" label="用户昵称" width="120"></el-table-column>
        <el-table-column prop="user.remark" label="用户备注" width="120"></el-table-column>
        <el-table-column label="默认地址" width="80">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.is_default === 1" type="danger" size="small">是</el-tag>
            <span v-else>否</span>
          </template>
        </el-table-column>
        <el-table-column prop="created_at" label="创建时间" width="180"></el-table-column>
      </el-table>
      
      <div v-if="addressList.length === 0 && !loading" class="empty-address">
        暂无地址数据
      </div>
    </el-card>
  </div>
</template>

<script>
import { getUserAddress } from '../../../libs/api'

export default {
  data() {
    return {
      addressList: [],
      mobile: '',
      loading: false
    }
  },
  created() {
    this.fetchAddressList()
  },
  methods: {
    async fetchAddressList() {
      this.loading = true
      try {
        const response = await getUserAddress({
          mobile: this.mobile
        })
        // 假设API返回的数据格式为{ data: [...] }
        this.addressList = response.data.data || []
      } catch (error) {
        console.error('获取地址列表失败:', error)
        this.$message.error('获取地址列表失败，请重试')
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

<style scoped>
.address-container {
  padding: 20px;
}

.address-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search-container {
  display: flex;
  align-items: center;
}

.empty-address {
  text-align: center;
  padding: 30px 0;
  color: #999;
}
</style>

